<template>
    <div>

        <el-card shadow="always">
            <div class="block">
                <el-date-picker
                        v-model="pagination.creattime"
                        :clearable="false"
                        :editable="false"
                        class="ml-10"
                        format="yyyy - MM - dd"
                        placeholder="选择日期"
                        type="date"
                        value-format="yyyy-MM-dd"
                >
                </el-date-picker>
                <el-button class="ml-10" type="primary" @click="select">搜索</el-button>
                <el-button class="ml-10" type="warning" @click="reset">重置</el-button>
            </div>
            <div>
                <el-button style="margin-top: 10px" type="primary" @click="addArticle">添加新闻</el-button>
            </div>
            <el-table :data="ArticleData" border stripe style="margin-top: 10px">
                <el-table-column align="center" label="#" type="index"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" align="center" label="新闻标题" prop="title"
                                 width="180px"></el-table-column>
                <el-table-column align="center" label="新闻封面" prop="image" width="100px">
                    <template v-slot="scope">
                        <el-avatar :size="45" :src="scope.row.image" shape="square"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="新闻内容" prop="content">
                    <template v-slot="scope">
                        <el-button icon="el-icon-search" plain @click="showContentDialog(scope.row)">查看全文
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="发布时间" prop="creattime"></el-table-column>
                <el-table-column align="center" label="操作">
                    <template v-slot="scope">
                        <el-tooltip
                                :enterable="false"
                                content="修改"
                                effect="dark"
                                placement="top"
                        >
                            <el-button circle icon="el-icon-edit" type="primary" @click="showDialog(scope.row)"></el-button>
                        </el-tooltip>

                        <el-tooltip
                                :enterable="false"
                                content="删除"
                                effect="dark"
                                placement="top"
                        >
                            <el-button circle icon="el-icon-delete" type="danger" @click="DeleteById(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    :current-page.sync="pagination.pageNum"
                    :page-size="pagination.pageSize"
                    :total="pagination.total"
                    layout="total,prev, pager, next,jumper"
                    @current-change="handleCurrentChange"
            >
            </el-pagination>
        </el-card>

        <!--    查看全文-->
        <el-dialog
                :title="title"
                :visible.sync="contentDialog"
                class="dialog"
                fullscreen
                width="60%"
        >
            <div v-html="content"></div>

        </el-dialog>
        <el-dialog
                :visible.sync="addDialog"
                class="dialog"
                title="添加新闻"
                width="60%"
        >
            <el-form ref="profileFormRef" :model="profileForm" :rules="profileFormRules" label-width="80px">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="profileForm.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="封面图片" prop="image">
                    <div>
                        <el-upload
                                :on-success="handleAvatarSuccess"
                                :show-file-list="false"
                                action="http://localhost:8081/file/upload"
                                class="avatar-uploader">
                            <el-avatar
                                    v-if="profileForm.image"
                                    :size="110"
                                    :src="profileForm.image"
                                    shape="square"
                            >
                            </el-avatar>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <vue-tinymce
                            v-model="profileForm.content"
                            :setting="setting"
                            placeholder="请输入内容"
                    />
                </el-form-item>
            </el-form>
            <!--底部区域-->
            <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="dialogAddArticle">确 定</el-button>
      </span>
        </el-dialog>
        <el-dialog
                :visible.sync="updateDialog"
                class="dialog"
                title="修改新闻"
                width="60%"
                @closed="updateFormClosed"
        >
            <el-form ref="updateFormRef" :model="updateForm" :rules="updateFormRules" label-width="80px">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="updateForm.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="封面图片" prop="image">
                    <div>
                        <el-upload
                                :on-success="handleAvatarSuccess111"
                                :show-file-list="false"
                                action="http://localhost:8081/file/upload"
                                class="avatar-uploader">
                            <el-avatar
                                    v-if="updateForm.image"
                                    :size="110"
                                    :src="updateForm.image"
                                    fit="fill"
                                    shape="square"
                            >
                            </el-avatar>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <vue-tinymce
                            v-model="updateForm.content"
                            :setting="setting"
                            placeholder="请输入内容"
                    />
                </el-form-item>
            </el-form>
            <!--底部区域-->
            <span slot="footer" class="dialog-footer">
        <el-button @click="updateDialog = false">取 消</el-button>
        <el-button type="primary" @click="dialogUpdateArticle">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    import request from "@/request";

    export default {
        name: "Article",
        data() {
            return {
                //时间
                date: '',
                //表格
                ArticleData: [],
                //分页
                pagination: {
                    pageNum: 1,
                    pageSize: 5,
                    creattime:''
                },
                //Dialog
                addDialog: false,
                updateDialog: false,
                contentDialog: false,
                //内容
                title: '',
                content: '',
                updateForm: {},
                profileForm: {},
                updateFormRules: {
                    title: [{required: true, message: "请输入标题", trigger: "blur"}],
                    content: [{required: true, message: "请输入内容", trigger: "blur"},],
                    image: [{required: true, message: "请插入封面", trigger: "blur"},]
                },
                profileFormRules: {
                    title: [{required: true, message: "请输入标题", trigger: "blur"}],
                    content: [{required: true, message: "请输入内容", trigger: "blur"},],
                    image: [{required: true, message: "请插入封面", trigger: "blur"},]
                },
                setting: {
                    menubar: false,
                    //顶部显示的 所有工具栏 (包括更多里面的)
                    toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify  | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat | ",
                    // 快速工具栏_选择_工具栏
                    quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
                    //加载工具
                    plugins: "image media table lists fullscreen quickbars",
                    images_upload_url: 'http://localhost:8081/file/tinymce/upload',
                    language: 'zh_CN', //本地化设置
                    branding: false, //隐藏右下角技术支持
                    height: 350,

                }
            }
        },
        created() {
            this.select();
        },
        methods: {
            //添加
            addArticle() {
                this.addDialog = true;
                this.profileForm = {};
                // methods 加载数据以后，隐藏的 Dialog 并没有编译渲染进dom里面。
                // 所以click弹出的时候 $refs 并没有获取到dom元素导致 ‘clearValidate’ of undefined
                this.$nextTick(() => {
                    this.$refs.profileFormRef.clearValidate();
                });
            },
            //确认添加
            dialogAddArticle() {
                this.$refs.profileFormRef.validate(valid => {
                    if (!valid) return;
                    request.post('/news/add',this.profileForm
                    ).then((res) => {
                        this.select();
                        this.addDialog = false;
                        if (res.code==200) {
                            this.$message({
                                message: res.msg,
                                type: "success"
                            })
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            })
                        }
                    });
                })
            },
            //查询
            select() {
                request.get('/news/page',{
                    params: this.pagination
                }).then((res) => {
                    console.log(res)
                    if (res.code==200) {
                        this.pagination.pageSize = res.data.pageSize;
                        this.pagination.pageNum = res.data.pageNum;
                        this.pagination.total = res.data.total;
                        this.ArticleData = res.data.list;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                });
            },
            //分页切换
            handleCurrentChange(pageNum) {
                //修改页码值为当前页码值
                this.pagination.pageNum = pageNum;
                this.select();
            },
            //下拉列表回调函数
            aaa(value) {
            },
            //重置按钮
            reset() {
                this.pagination.creattime = ''
                this.select();
            },
            //修改按钮
            showDialog(row) {
                this.updateDialog = true;
                request.get('/news/getbyid/'+row.newsId
                ).then((res) => {
                    //需要渲染之后才能拿到dom值 再进行校验清除 并且清除内容
                    this.$refs.updateFormRef.resetFields();//清除验证规则 不清除的话 上次的验证会显示在这次里面
                    this.updateForm = res.data
                })
            },
            //修改 dialog 关闭的回调
            updateFormClosed() {
                this.select();
            },
            //确认修改
            dialogUpdateArticle() {
                this.$refs.updateFormRef.validate(valid => {
                    if (!valid) return;
                    request.put('/news/update',this.updateForm
                    ).then((res) => {
                        this.updateDialog = false;
                        this.select();
                        this.addDialog = false;
                        if (res.code==200) {
                            this.$message({
                                message: res.msg,
                                type: "success"
                            })
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            })
                        }
                    });
                })
            },
            //删除按钮
            DeleteById(row) {
                request.delete('/news/delete/'+row.newsId)
                    .then((res) => {
                    this.select();
                    if (res.code==200) {
                        this.$message({
                            message: res.msg,
                            type: "success"
                        })
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            },
            //封面上传
            handleAvatarSuccess(res) {
                console.log(res)
                this.profileForm.image = res;
            },
            //修改封面
            handleAvatarSuccess111(res) {
                this.updateForm.image = res;
            },
            //查看全文
            showContentDialog(row) {
                this.contentDialog = true
                this.title = row.title
                this.content = row.content
            }
        }
    }
</script>

<style>
    .dialog .el-dialog__body {
        padding: 10px 20px 0px 20px;
        z-index: 99!important;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 110px;
        height: 110px;
        line-height: 110px;
        text-align: center;
    }

    /*.add {*/
    /*    ::v-deep .el-dialog_wrapper{*/
    /*        z-index: 99!important;*/
    /*    }*/
    /*    ::v-deep .v-modal{*/
    /*        z-index: 95!important;*/
    /*    }*/
    /*}*/
</style>